<template>
  <div>
    <div class="header__top">
      <div class="header__wrap">
        <div class="wrap-left">
          <sicon class="left-icon" type="3.1首页-选中" color="red" />
          <router-link to="/home">天猫首页</router-link>
          <span v-if="!userInfoStore.initState.nickName"
            >喵，欢迎来天猫 &nbsp;&nbsp;&nbsp;</span
          >
          <span v-else
            >{{ userInfoStore.initState.nickName }}&nbsp;&nbsp;&nbsp;</span
          >
          <a @click="logOut" v-if="userInfoStore.initState.nickName"
            >退出登录！！！</a
          >
          <template v-else>
            <router-link to="/login">请登录</router-link>
            <router-link to="/register">免费注册</router-link>
          </template>
        </div>
        <div class="wrap-right">
          <div class="header__top-nav-item">
              <div class="item-meun">
                <a href=""> 我的淘宝 </a>
                <sicon type="3.1 下拉" />
                <div class="meun-bd">
                  <router-link to="/order">已买到的宝贝</router-link>
                  <a>已卖出的宝贝</a>
                </div>
              </div>
          </div>
            <div class="header__top-nav-item">
              <sicon type="3.1购物车-选中" color="red" size="14" />
              <router-link to="/shopcart">购物车</router-link>
            </div>
            <div class="header__top-nav-item">
              <div class="item-meun">
                <a>收藏夹</a>&nbsp;
                <sicon type="3.1 下拉" />
                <div class="meun-bd">
                  <router-link to="/collect">收藏的宝贝</router-link>
                </div>
              </div>
            </div>
            <div class="header__top-nav-item line"></div>
            <div class="header__top-nav-item">
              <sicon type="手机" color="red" />
              <a>手机板</a>
            </div>
            <div class="header__top-nav-item"><a href="">淘宝网</a></div>
            <div class="header__top-nav-item"><a href="">网页无障碍</a></div>
            <div class="header__top-nav-item">
              <a href="">商家支持</a>
            </div>
            <div class="header__top-nav-item"><a href="">商家中心</a></div>
            <div class="header__top-nav-item">
              <div class="item-meun">
                <a href="">联系客服</a> <sicon type="3.1 下拉" />
                <div class="meun-bd">
                  <a>消费者客服</a>
                  <a>卖家客服</a>
                  <a>意见反馈</a>
                  <a>网页版旺旺</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    <Search />
  </div>
</template>

<script lang="ts">
export default {
  name: "SHeader",
};
</script>

<script lang="ts" setup>
import { useUserInfoStore } from "@/stores/user";
import Search from '../../components/SearchHeader/index.vue'
const userInfoStore = useUserInfoStore();

const logOut = async () => {
  await userInfoStore.logOut();
  window.location.reload();
};
</script>

<style lang="less" scoped>
.header__wrap a {
  text-decoration: none;
  color: #999999;
}

.header__wrap a:hover {
  color: #fa3b3b;
}

.header__top {
  height: 26px;
  line-height: 26px;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  color: #999;
}

.header__wrap {
  min-width: 1200px;
  width: 1200px;
  display: flex;
  justify-content: space-between;
}

.wrap-right {
  display: flex;
}

.wrap-left {
  display: flex;
  justify-content: space-around;
  align-items: center;

  >a {
    margin-right: 20px;

    &:last-child {
      margin-right: 0;
    }
  }

  .left-icon {
    padding: 0 4px;
    vertical-align: middle;
  }
}

.header__top-nav-item {
  padding: 0 10px 0 14px;
  height: 16px;

  &.line {
    margin: auto 0;
    border-left: 1px solid #ccc;
    padding: 0;
  }

  .item-meun {
    position: relative;

    svg {
      font-size: 15px;
      vertical-align: top !important;
    }

    &:hover {
      background-color: #fff;
    }

    &:hover .meun-bd {
      display: block !important;
    }

    .meun-bd {
      display: none !important;
      position: absolute;
      display: flex;
      flex-direction: column;
      background: #fff;
      line-height: 1.5;
      padding: 8px 10px;
      width: 74px;
      left: 0;
      top: 26px;
      z-index: 9999;
      border: solid #eee;
      border-width: 0 1px 1px;
      &:hover {
        display: block !important;
      }
      & a {
        display: inline-block;
      }
    }
  }
}
</style>
